<!--
 @description
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023/04/21 12:44:44
-->
<template>
  <div>
    <Card>
      <DealerCell :detail="dealerData">
        <div style="margin-top: 8px" :class="{ 'color-org': typeCode === 'E', 'color-normal': typeCode === 'F' }">
          经销商{{ typeCode === 'F' ? '解冻' : '冻结' }}
        </div>
      </DealerCell>
    </Card>
    <Card>
      <Cell
        title="是否需要其他业务客户经理接收知晓"
        :modelValue="detail.isOtherReceiveManagerKnow"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
      <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
        <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
        <template v-if="!!detail.receiveManagerCode">
          <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
          <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
          <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
        </template>
      </template>
      <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
    </Card>
    <Card>
      <Cell :modelValue="freezeDTO.reportType" title="提报类型" dictTypeCode="CTM_REPORT_TYPE" readonly />
      <Cell
        :title="`${typeCode === 'F' ? '解冻' : '冻结'}类型`"
        :modelValue="freezeDTO.type"
        default-value="--"
        readonly
        dict-type-code="CTM_FREEZE_UNFREEZE_TYPE"
      />

      <Cell
        v-if="freezeDTO.type === 'D' || freezeDTO.type === 'E'"
        :title="`${typeCode === 'F' ? '解冻' : '冻结'}细分类型`"
        :modelValue="freezeDTO.subType"
        default-value="--"
        readonly
        dict-type-code="CTM_UNFREEZE_SUB_TYPE"
      />
      <Cell
        title="首次执行时间"
        :modelValue="parseTime(freezeDTO.executeTime, '{y}-{m}-{d}')"
        default-value="--"
        readonly
      />

      <template v-if="typeCode === 'F'">
        <Cell
          title="是否临时解冻"
          :modelValue="freezeDTO.isTempUnfreeze === 1 ? '是' : '否'"
          default-value="--"
          readonly
        />
        <Cell
          title="预计关闭时间"
          :modelValue="parseTime(freezeDTO.preCloseTime, '{y}-{m}-{d} {h}:{i}:{s}')"
          default-value="--"
          readonly
        />
      </template>

      <Cell
        :title="`${typeCode === 'F' ? '解冻' : '冻结'}原因`"
        :modelValue="freezeDTO.cause"
        default-value="--"
        is-column
        custom
        divider
        readonly
      />
      <Cell title="备注" :modelValue="freezeDTO.remark" default-value="--" is-column custom divider readonly />
    </Card>

    <Card v-if="typeCode === 'F'">
      <Cell
        title="是否涉及报图"
        :modelValue="freezeDTO.isInvolveReportPic === 1 ? '涉及' : '不涉及'"
        default-value="--"
        readonly
      />

      <template v-if="[1, '1'].includes(freezeDTO.isInvolveReportPic)">
        <Cell
          title="报图时间"
          :modelValue="parseTime(freezeDTO.lastReportPicTime, '{y}-{m}-{d}')"
          default-value="--"
          readonly
        />
        <Cell title="报图面积㎡" :modelValue="freezeDTO.lastReportPicArea" default-value="--" readonly />
      </template>
    </Card>
    <Card v-if="typeCode === 'F'">
      <Cell
        title="是否涉及整改保证金"
        :modelValue="freezeDTO.isInvolveDeposit === 1 ? '涉及' : '不涉及'"
        default-value="--"
        readonly
      />
    </Card>

    <Card :title="`${typeCode === 'F' ? '解冻' : '冻结'}账号`">
      <div class="account-list" v-for="(item, i) in accountList" :key="i">
        <div class="account-item">
          <div class="title">
            <span class="tag">{{ item.accountTypeName }}</span>
            <span class="code">{{ item.accountCode }}</span>
            <span
              class="state"
              :class="{
                'color-error': item.state === 1,
                'color-normal': item.state === 0
              }"
            >
              {{ item.state === 1 ? '冻结中' : '正常使用' }}
            </span>
          </div>
          <div class="address">{{ item.accountName }}</div>
        </div>
      </div>
    </Card>

    <Card :title="`${typeCode === 'F' ? '解冻' : '冻结'}附件`">
      <Cell is-column custom readonly>
        <AttachmentUpload v-model="attrFileList" :objectId="id" readonly />
        <div v-if="attrFileList.length === 0">暂无相关附件</div>
      </Cell>
    </Card>

    <Card title="BPM审批信息">
      <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
      <Cell
        title="申请时间"
        :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      />
      <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly />
      <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
        <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
        <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
        <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
        <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
        <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
      </div>
      <!-- <Cell
        title="审批结束时间"
        :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      />
      <Cell
        title="审批结果"
        :modelValue="detail.authorityReviewResult"
        dictTypeCode="REVIEW_RESULT"
        default-value="--"
        readonly
      />
      <Cell title="审批意见" :modelValue="detail.authorityReviewAdvice" default-value="--" readonly is-column custom /> -->
    </Card>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch } from 'vue'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import DealerCell from '@/components/DealerCell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { detail } from '@/apis/dealerMarketing/FreezeAndthaw'
  import { parseTime } from '@/utils'

  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'FreezeAndthawDetailInfo',
    components: { Card, Cell, DealerCell, AttachmentUpload },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const datas = reactive<anyObjectModle>({
        detail: {
          type: 'E'
        },
        attrFileList: []
      })
      // 单据类型
      const typeCode = computed(() => {
        return datas.detail?.type || 'E'
      })

      const dealerData = computed(() => {
        const d = { ...datas.detail }
        return {
          code: d.customerCode || '',
          name: d.customerName || '',
          officeCode: d.officeCode || '',
          officeName: d.officeName || '',
          createBy: d.createBy || ''
        }
      })
      const accountList = computed(() => {
        const list = datas.detail?.rangeDTOS || []
        return list.filter((v: any) => [1, '1'].includes(v.isChange))
      })

      // 冻结数据
      const freezeDTO = computed(() => {
        return datas.detail?.freezeDTO || {}
      })

      const getDetail = async () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data
          ctx.emit('data-change', res.data)
        })
      }
      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )

      return {
        ...toRefs(datas),
        typeCode,
        dealerData,
        freezeDTO,
        accountList,
        parseTime
      }
    }
  })
</script>
<style lang="less" scoped>
  .account-list {
    padding: 0 16px;
    .radio {
      width: 24px;
      height: 24px;
      border: 1px solid;
    }
    /deep/ .qmp-checkbox__label {
      flex: 1;
    }
    .account-item {
      padding: 16px 0;
      .title {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        .tag {
          display: inline-block;
          padding: 2px 4px;
          background: var(--bg-focusing-brand);
          border-radius: ' 2px 2px 2px 2px';
          border: 1px solid var(--button-main-default);
          font: var(--font-point);
          color: var(--texticon-color-brand-normal);
          margin-right: 4px;
        }
        .code {
          font: var(--font-main-title-strengthen);
          color: var(--texticon-default-strong);
        }
        .state {
          flex: 1;
          font: var(--font-main-body);
          text-align: right;
        }
      }
      .address {
        font: var(--font-main-title-body);
        color: var(--texticon-default-strong);
      }
    }
  }
</style>
